<template>
    <div class="poster-container">
        <!-- 背景层 -->
        <div class="background-layer">
            <img src="~assets/image/poster_background.jpg" class="background-image" />
            <div class="particle-overlay"></div>
            <div class="grid-overlay"></div>
        </div>

        <!-- 内容层 -->
        <div class="content-layer">
            <!-- 顶部标题区 -->
            <div class="title-section">
                <h1 class="main-title">九型人格解码计划</h1>
                <h1 class="main-title">扫描即见你的宇宙人格</h1>
            </div>

            <!-- 主人格显示区 -->
            <div class="main-personality">
                <div class="personality-badge">
                    <span class="badge-number">{{ main_type }}</span>
                    <span class="badge-text">主人格</span>
                </div>
                <p class="personality-hint">请扫码或直接点击查看结果按钮,立即解锁完整报告，可截图分享此页</p>
            </div>

            <!-- 中心内容区 -->
            <div class="center-section">
                <!-- 二维码容器 -->
                <div class="qr-container">
                    <div class="qr-halo"></div>
                    <div class="qr-code">
                        <img :src="qrImageUrl" alt="九型人格测试二维码" class="qr-image" style="transform: perspective(1000px) rotateY(15deg)" />
                    </div>
                </div>

                <!-- 人格图标 -->
                <div class="personality-icons" v-if="showButtons">
                    <div v-for="i in 9" :key="i" class="icon-container" @click="showPersonalityInfo(i)">
                        <div class="icon-bg"></div>
                        <span class="icon-number">{{ i }}</span>
                    </div>
                </div>
            </div>

            <!-- 底部功能区 -->
            <div class="action-section" v-if="showButtons">
                <button class="action-btn view-btn" @click="$router.push({ name: 'result', params: { id } })">
                    <span class="btn-icon">
                        <i class="el-icon-view"></i>
                    </span>
                    <span>查看结果</span>
                </button>
                <!-- <button class="action-btn download-btn" @click="saveAsImage">
                    <span class="btn-icon">
                        <i class="el-icon-download"></i>
                    </span>
                    <span>保存图片</span>
                </button> -->
            </div>
        </div>

        <!-- 人格简介弹窗 -->
        <div v-if="showModal" class="personality-modal" @click.self="closeModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">{{ enneagramTypes[currentPersonality - 1].name }}</h3>
                    <button class="close-btn" @click="closeModal">×</button>
                </div>
                <div class="modal-body">
                    <div >
                        <p>{{ enneagramTypes[currentPersonality - 1].description }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick, computed, reactive } from 'vue'
import { useRoute } from 'vue-router'
import { fullUrl } from '/@/utils/common'
import QRCode from 'qrcode'
import domtoimage from 'dom-to-image'
import { poster } from '/@/api/frontend/enneagram/index'
const route = useRoute()
const id = route.params.id || route.query.id // 优先使用query参数，如果没有则使用params参数
// 主人格（示例值，实际应从API获取）
const main_type = ref(0)
// 弹窗控制
const showModal = ref(false)
const currentPersonality = ref(1)

// 二维码相关
const qrImageUrl = ref('')
const resultUrl = fullUrl('/result/' + id,'http://cs.jiujiurenge.com')
const qrText = computed(() => {
    return resultUrl
})

const generateHexagonQRCode = async () => {
    try {
        const canvas = document.createElement('canvas')
        const size = 300
        canvas.width = size
        canvas.height = size
        console.log(qrText.value)
        // 生成基础二维码
        await QRCode.toCanvas(canvas, qrText.value, {
            width: size,
            margin: 2, // 恢复边距确保可扫描
            color: {
                dark: '#4FA2FF',
                light: '#16213e',
            },
            errorCorrectionLevel: 'H',
        })

        const ctx = canvas.getContext('2d')
        if (!ctx) return
        qrImageUrl.value = canvas.toDataURL('image/png')
    } catch (error) {
        console.error('生成二维码失败:', error)
        qrImageUrl.value = ''
    }
}

// 显示人格简介
const showPersonalityInfo = (personalityId: number) => {
    currentPersonality.value = personalityId
    showModal.value = true
}

// 关闭弹窗
const closeModal = () => {
    showModal.value = false
}
onMounted(async () => {
    await generateHexagonQRCode()
    try {
        const response = await poster({ id })
        main_type.value = response.data.poster.main_type || 0
        enneagramTypes.value = response.data.enneagramTypes || []
    } catch (error) {
        console.error('获取报告失败！', error)
        // 设置默认值
        enneagramTypes.value = []
    }
})
// 九型人格数据
const enneagramTypes = ref([])
// 控制按钮显示
const showButtons = ref(true)

// 保存为图片
const saveAsImage = async () => {
    try {
        // 临时隐藏按钮
        // showButtons.value = false

        // 等待DOM更新
        await nextTick()

        const container = document.querySelector('.poster-container')
        if (!container) return

        // 创建一个临时容器来克隆海报内容
        const tempContainer = document.createElement('div')
        tempContainer.style.position = 'absolute'
        tempContainer.style.left = '-9999px'
        tempContainer.style.top = '0'
        tempContainer.style.width = `${container.scrollWidth}px`
        tempContainer.style.height = `${container.scrollHeight}px`

        // 克隆海报内容到临时容器
        const clone = container.cloneNode(true)
        tempContainer.appendChild(clone)
        document.body.appendChild(tempContainer)

        // 使用dom-to-image处理临时容器
        const dataUrl = await domtoimage.toPng(clone as HTMLElement, {
            quality: 1.0,
            useCORS: true,
            cacheBust: true,
            width: container.scrollWidth,
            height: container.scrollHeight,
            style: {
                transform: 'none', // 不使用scale变换
                width: '100%',
                height: '100%',
            },
            filter: (node) => {
                return !(node.classList && node.classList.contains('el-icon'))
            },
        })

        // 移除临时容器
        document.body.removeChild(tempContainer)

        // 创建下载链接
        const link = document.createElement('a')
        link.href = dataUrl
        link.download = `九型人格-${main_type.value}.png`
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)

        // 恢复按钮显示
        showButtons.value = true
    } catch (error) {
        console.error('保存图片失败:', error)
        showButtons.value = true
    }
}
</script>

<style scoped lang="scss">
.poster-container {
    width: 100%;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    font-family: 'Rajdhani', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    color: white;
}

.background-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
}

.particle-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: radial-gradient(circle at center, rgba(59, 61, 111, 0.2) 0%, rgba(0, 0, 0, 0.8) 70%);
}

.grid-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: linear-gradient(rgba(0, 247, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 247, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

.content-layer {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4vh 4vw;
    box-sizing: border-box;
}

.title-section {
    text-align: center;
    margin-bottom: 2vh;
}

.main-title {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    margin: 0;
    background: linear-gradient(90deg, #00f7ff, #9d4dff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 20px rgba(0, 247, 255, 0.3);
    letter-spacing: 2px;
}

.sub-title {
    font-size: clamp(1rem, 2vw, 1.5rem);
    color: rgba(255, 255, 255, 0.8);
    margin-top: 1vh;
    letter-spacing: 1px;
}

/* 主人格显示区 */
.main-personality {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2vh 0;
}

.personality-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: clamp(80px, 15vw, 120px);
    height: clamp(80px, 15vw, 120px);
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 247, 255, 0.3), rgba(157, 77, 255, 0.3));
    border: 2px solid rgba(0, 247, 255, 0.5);
    box-shadow: 0 0 20px rgba(0, 247, 255, 0.4);
}

.badge-number {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: #00f7ff;
}

.badge-text {
    font-size: clamp(0.8rem, 1.5vw, 1rem);
    color: rgba(255, 255, 255, 0.8);
}

.personality-hint {
    margin-top: 1.5vh;
    font-size: clamp(0.9rem, 1.8vw, 1.2rem);
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

.center-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}

.qr-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 4vh;
}

.qr-halo {
    width: clamp(200px, 30vw, 380px);
    height: clamp(200px, 30vw, 380px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 247, 255, 0.2) 0%, transparent 70%);
    position: absolute;
    animation: halo-pulse 4s ease-in-out infinite;
}

.qr-code {
    position: relative;
    width: clamp(150px, 20vw, 240px);
    height: clamp(150px, 20vw, 240px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.qr-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 15px rgba(0, 247, 255, 0.5));
    -webkit-touch-callout: default; /* 允许长按操作 */
    -webkit-user-select: auto;
    user-select: auto;
    pointer-events: auto;
    transition: all 0.5s ease;
    animation: qr-float 4s ease-in-out infinite alternate;
}

@keyframes qr-float {
    0% {
        transform: perspective(1000px) rotateY(0deg) translateY(0);
    }
    100% {
        transform: perspective(1000px) rotateY(0deg) translateY(-10px);
    }
}

.qr-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.particle {
    position: absolute;
    background-color: #00f7ff;
    border-radius: 50%;
    opacity: 0.6;
    transform-origin: center;
}

.qr-hint {
    margin-top: 2vh;
    font-size: clamp(0.9rem, 1.5vw, 1.2rem);
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 1px;
}

.personality-icons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: min(90vw, 900px);
    margin-top: 3vh;
    gap: 1vw;
}

.icon-container {
    width: clamp(40px, 8vw, 60px);
    height: clamp(40px, 8vw, 60px);
    margin: 0.5vh 0.5vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.icon-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(0, 247, 255, 0.1);
    border: 1px solid rgba(0, 247, 255, 0.3);
    transition: all 0.3s ease;
}

.icon-container:hover .icon-bg {
    background: rgba(0, 247, 255, 0.3);
    transform: scale(1.1);
}

.icon-number {
    font-size: clamp(1rem, 3vw, 1.5rem);
    font-weight: 600;
    color: #00f7ff;
    z-index: 1;
}

.action-section {
    display: flex;
    justify-content: center;
    gap: clamp(15px, 3vw, 40px);
    margin-top: 3vh;
    flex-wrap: wrap;
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 1.5vw, 12px) clamp(15px, 3vw, 30px);
    border: none;
    border-radius: 30px;
    font-size: clamp(0.9rem, 1.5vw, 1.2rem);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.view-btn {
    background: linear-gradient(90deg, #00f7ff, #3b3d6f);
    color: white;
}

.download-btn {
    background: linear-gradient(90deg, #9d4dff, #3b3d6f);
    color: white;
}

.action-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.action-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    z-index: -1;
}

.action-btn:hover::before {
    transform: translateX(0);
}

.btn-icon {
    margin-right: 8px;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
}

/* 人格简介弹窗 */
.personality-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    backdrop-filter: blur(5px);
}

.modal-content {
    width: min(90%, 500px);
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: 15px;
    border: 1px solid rgba(0, 247, 255, 0.3);
    box-shadow: 0 0 30px rgba(0, 247, 255, 0.2);
    overflow: hidden;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(90deg, rgba(0, 247, 255, 0.1), rgba(157, 77, 255, 0.1));
    border-bottom: 1px solid rgba(0, 247, 255, 0.2);
}

.modal-title {
    margin: 0;
    color: #00f7ff;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
}

.close-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 24px;
    cursor: pointer;
    transition: color 0.3s;
}

.close-btn:hover {
    color: #00f7ff;
}

.modal-body {
    padding: 20px;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(0.9rem, 1.5vw, 1rem);
    line-height: 1.6;
}

@keyframes halo-pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.4;
    }
    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

@keyframes particle-rotate {
    0% {
        transform: rotate(0) translate(100px) rotate(0);
        opacity: 0.8;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        transform: rotate(360deg) translate(100px) rotate(-360deg);
        opacity: 0.8;
    }
}

/* 媒体查询 - 移动设备 */
@media (max-width: 768px) {
    .content-layer {
        padding: 3vh 4vw;
    }

    .action-section {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .action-btn {
        width: 80%;
    }

    .personality-icons {
        gap: 1vw;
    }
}

/* 媒体查询 - 平板设备 */
@media (min-width: 769px) and (max-width: 1024px) {
    .content-layer {
        padding: 4vh 6vw;
    }
}
</style>
